layui table去掉右侧滑动条的实现方法(IT技术)

您所在的位置:网站首页 layui table cols layui table去掉右侧滑动条的实现方法(IT技术)

layui table去掉右侧滑动条的实现方法(IT技术)

2022-05-19 21:24| 来源: 网络整理| 查看: 265

使用layui table后,table会自动有一个滑动条,使用时需要去掉,原理如下:

定义一个tab的父div id,在这个id中寻找 class为 layui-table-main,layui-form的标签,将高度设置为100%即可。

//在layui table加载完成后,重新设置表格高度为100%,不限制表格高度,不会在表格上出现垂直滚动条 function AutoTableHeight() { var dev_obj = document.getElementById('table_and_page_div_id'); //table的父div var layuitable_main = dev_obj.getElementsByClassName("layui-table-main"); //在父div中找 layui-table-main 属性所在标签 if (layuitable_main != null && layuitable_main.length > 0) { layuitable_main[0].style.height = '100%'; } var layuitable = dev_obj.getElementsByClassName("layui-form"); //在父div中找 layui-form 属性所在标签 if (layuitable != null && layuitable.length > 0) { layuitable[0].style.height = '100%'; } }

在table的done事件中调用AutoTableHeigh()即可。

//table表格配置 var g_table_config = { elem: '#device_list_table_id' , data: null , limit: cg_OnePageDataCount //每页显示50条 , text: { none: '暂无相关数据' } , height: 'full-200' , cellMinWidth: 70 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 , page: false //开启分页 , cols: [g_table_cols] // , even: true //开启隔行背景 , size: 'sm' //小尺寸的表格 , done: function (res, curr, count) { //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res); //得到当前页码 console.log(curr); //得到数据总量 console.log(count); AutoTableHeight(); } };

最终效果如下:

以上这篇layui table去掉右侧滑动条的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章layui动态加载多表头的实例layui多iframe页面控制定时器运行的方法在layui中layer弹出层点击事件无效的解决方法Layui数据表格跳转到指定页的实现方法layui 实现table翻页滚动条位置保持不变的例子layui 对弹窗 form表单赋值的实现方法layui-table对返回的数据进行转变显示的实例layui table数据修改的回显方法微信小程序下拉加载和上拉刷新两种实现方法详解layui动态加载多表头的实例 猜您喜欢

layui动态加载多表头的实例

今天小编就为大家分享一篇layui动态加载多表头的实例,具有很好的参考价值,希望对大家有所协助。一同跟随小编过来看看吧..

如何阻止小程序遮罩层下方图层滚动

这篇文章主要引见了如何阻止小程序遮罩层下方图层滚动,文中经过示例代码引见的十分细致,对大家的学习或者工作具有一定的参考学习价值,需求的朋友能够参考下.. 05-17如何阻止小程序遮罩层下方图层滚动 05-17layui多iframe页面控制定时器运行的方法 05-17解决layer.msg 不居中 ifram中的问题 05-17JS中比Switch...Case更优雅的多条件判断写法 05-17layer实现弹出层自动调节位置 05-17vue使用i18n实现国际化的方法详解 网友评论 推荐文章 细数软件工程各阶段必不可少的那些图

细数软件工程各阶段必不可少的那些图

各种反弹shell方法总结

各种反弹shell方法总结

Mabitis

Unable to preventDefault inside passive event listener due to target being treated as passive

各种反弹shell方法总结

Java中的循环语句

MySQL 索引

git recommend(alive)

[白话解析] 深入浅出支持向量机(SVM)之核函数

html小工具——文章注释编辑器

最新文章 1vue实现手机号码的校验实例代码(防抖函数的应用场景) 2一文看懂如何简单实现节流函数和防抖函数 3React路由鉴权的实现方法 4vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果) 5layer.open的自适应及居中及子页面标题的修改方法 6在layui中layer弹出层点击事件无效的解决方法 7layer.open弹层查看缩略图的原图,自适应大小的实例 8JavaScript基础之this和箭头函数详析 9layer.js open 隐藏滚动条的例子 10Layui数据表格跳转到指定页的实现方法

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3